use define model

src/market/type/MarketTypeInput.vue

@@ -1,25 +1,18 @@
 <script setup lang="ts">
 import { vOnClickOutside } from '@vueuse/components';
-import { useVirtualList, useVModel } from '@vueuse/core';
+import { useVirtualList } from '@vueuse/core';
 import log from 'loglevel';
 import { nextTick, ref, watch, watchEffect } from 'vue';
 import { MarketType, searchMarketTypes } from './MarketType';
 import MarketTypeLabel from "./MarketTypeLabel.vue";
 
-
-interface Props {
-    modelValue?: MarketType;
-}
 interface Emits {
-    (e: 'update:modelValue', value?: MarketType): void;
     (e: 'submit'): void;
 }
 
-const props = defineProps<Props>();
+const modelValue = defineModel<MarketType>();
 const emit = defineEmits<Emits>();
 
-const value = useVModel(props, 'modelValue', emit);
-
 const isOpen = ref(false);
 const name = ref('');
 const suggestions = ref<MarketType[]>([]);
@@ -47,7 +40,7 @@ const moveUp = () => {
 }
 const select = (type?: MarketType) => {
     log.debug('Select:', type);
-    value.value = type;
+    modelValue.value = type;
     currentIndex.value = -1;
     suggestions.value = [];
     isOpen.value = false;
@@ -62,18 +55,18 @@ const submit = async () => {
     
         select(v);
         await nextTick();
-    } else if (props.modelValue === undefined && suggestions.value.length > 0) {
+    } else if (modelValue.value === undefined && suggestions.value.length > 0) {
         select(suggestions.value[0]);
         await nextTick();
     }
 
-    if (value.value === undefined) {
+    if (modelValue.value === undefined) {
         return;
     }
     emit('submit');
 }
 
-watch(() => props.modelValue, async v => {
+watch(() => modelValue.value, async v => {
     if (v === undefined) {
         name.value = '';
     } else {
@@ -96,7 +89,7 @@ watchEffect(async () => {
 <template>
     <div @click="() => isOpen = true" v-on-click-outside="() => isOpen = false">
         <div class="fake-input">
-            <img v-if="value?.id" :src="`https://images.evetech.net/types/${value.id}/icon?size=32`" alt="" />
+            <img v-if="modelValue?.id" :src="`https://images.evetech.net/types/${modelValue.id}/icon?size=32`" alt="" />
             <input type="text" v-model="name" @keyup.enter="submit" @keyup.down="moveDown" @keyup.up="moveUp" />
         </div>
         <div v-if="suggestions.length > 1" class="z-20 absolute w-96">