refac: defindComponent => vue3 setup

hwe/ts/processing/SelectCity.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-multiselect
+  <Multiselect
     v-model="selectedCity"
     :allow-empty="false"
     :options="citiesForFind"
@@ -16,30 +16,31 @@
     :maxHeight="400"
     :searchable="searchable"
   >
-    <template #option="props"
+    <template #option="prop"
       ><span
         :style="{
-          color: props.option.notAvailable ? 'red' : undefined,
+          color: prop.option.notAvailable ? 'red' : undefined,
         }"
       >
-        {{ props.option.title }}
+        {{ prop.option.title }}
-        <span v-if="props.option.info">({{ props.option.info }})</span>
+        <span v-if="prop.option.info">({{ prop.option.info }})</span>
-        {{ props.option.notAvailable ? "(불가)" : undefined }}</span
+        {{ prop.option.notAvailable ? "(불가)" : undefined }}</span
       >
     </template>
-    <template #singleLabel="props">
+    <template #singleLabel="prop">
       <span
         :style="{
-          color: props.option.notAvailable ? 'red' : undefined,
+          color: prop.option.notAvailable ? 'red' : undefined,
         }"
-        >{{ props.option.simpleName }} {{ props.option.notAvailable ? "(불가)" : undefined }}</span
+        >{{ prop.option.simpleName }} {{ prop.option.notAvailable ? "(불가)" : undefined }}</span
       >
     </template>
-  </v-multiselect>
+  </Multiselect>
 </template>
-<script lang="ts">
+<script setup lang="ts">
+import { Multiselect } from "vue-multiselect";
 import { convertSearch초성 } from "@/util/convertSearch초성";
-import { defineComponent, type PropType } from "vue";
+import { onMounted, ref, watch, type PropType } from "vue";
 
 type SelectedCity = {
   value: number;
@@ -50,8 +51,7 @@ type SelectedCity = {
   notAvailable?: boolean;
 };
 
-export default defineComponent({
+const props = defineProps({
-  props: {
   modelValue: {
     type: Number,
     required: true,
@@ -65,13 +65,21 @@ export default defineComponent({
     required: false,
     default: true,
   },
-  },
+});
-  emits: ["update:modelValue"],
+
-  data() {
+const emit = defineEmits<{
-    const citiesForFind = [];
+  (event: "update:modelValue", value: number): void;
-    const targets = new Map<number, SelectedCity>();
+}>();
-    let selectedCity;
+
-    for (const [value, { name, info }] of this.cities.entries()) {
+const citiesForFind = ref<SelectedCity[]>([]);
+const targets = new Map<number, SelectedCity>();
+const selectedCity = ref<SelectedCity>();
+
+onMounted(() => {
+  citiesForFind.value = [];
+  targets.clear();
+
+  for (const [value, { name, info }] of props.cities.entries()) {
     const obj: SelectedCity = {
       value,
       title: name,
@@ -79,26 +87,27 @@ export default defineComponent({
       simpleName: name,
       searchText: convertSearch초성(name).join("|"),
     };
-      if (value == this.modelValue) {
+    if (value == props.modelValue) {
-        selectedCity = obj;
+      selectedCity.value = obj;
     }
-      citiesForFind.push(obj);
+    citiesForFind.value.push(obj);
     targets.set(value, obj);
   }
-    return {
+});
-      selectedCity,
+
-      citiesForFind,
+watch(
-      targets,
+  () => props.modelValue,
-    };
+  (value) => {
-  },
+    if (targets.has(value)) {
-  watch: {
+      selectedCity.value = targets.get(value);
-    modelValue(val: number) {
+    }
-      const target = this.targets.get(val);
+  }
-      this.selectedCity = target;
+);
-    },
+
-    selectedCity(val: SelectedCity) {
+watch(selectedCity, (value) => {
-      this.$emit("update:modelValue", val.value);
+  if (!value) {
-    },
+    return;
-  },
+  }
+  emit("update:modelValue", value.value);
 });
 </script>

hwe/ts/processing/SelectColor.vue

@@ -1,5 +1,5 @@
 <template>
-  <v-multiselect
+  <Multiselect
     v-model="selectedColor"
     :allow-empty="false"
     :options="forFind"
@@ -16,9 +16,9 @@
     :maxHeight="400"
     :searchable="false"
   >
-    <template #option="props">
+    <template #option="prop">
       <div
-        :class="`sam-color-${props.option.title.slice(1)}`"
+        :class="`sam-color-${prop.option.title.slice(1)}`"
         :style="{
           margin: '-0.375rem -0.75rem',
         }"
@@ -29,13 +29,13 @@
             padding: '0.545rem 0.75rem',
           }"
         >
-          {{ props.option.title }}
+          {{ prop.option.title }}
         </div>
       </div>
     </template>
-    <template #singleLabel="props">
+    <template #singleLabel="prop">
       <div
-        :class="`sam-color-${props.option.title.slice(1)}`"
+        :class="`sam-color-${prop.option.title.slice(1)}`"
         :style="{
           margin: '-0.25rem -0.75rem',
         }"
@@ -47,23 +47,22 @@
             borderRadius: '0.25rem',
           }"
         >
-          {{ props.option.title }}
+          {{ prop.option.title }}
         </div>
       </div>
     </template>
-  </v-multiselect>
+  </Multiselect>
 </template>
-<script lang="ts">
+<script setup lang="ts">
-import { unwrap } from "@/util/unwrap";
+import { Multiselect } from "vue-multiselect";
-import { defineComponent, type PropType } from "vue";
+import { onMounted, ref, watch, type PropType } from "vue";
 
 type SelectedColor = {
   value: number;
   title: string;
 };
 
-export default defineComponent({
+const props = defineProps({
-  props: {
   modelValue: {
     type: Number,
     required: true,
@@ -72,36 +71,43 @@ export default defineComponent({
     type: Array as PropType<string[]>,
     required: true,
   },
-  },
+});
-  emits: ["update:modelValue"],
+
-  data() {
+const emit = defineEmits<{
-    const forFind = [];
+  (event: "update:modelValue", value: number): void;
-    const targets = new Map<number, SelectedColor>();
+}>();
-    for (const [value, title] of this.colors.entries()) {
+
+const forFind = ref<SelectedColor[]>([]);
+const targets = ref(new Map<number, SelectedColor>());
+const selectedColor = ref<SelectedColor>();
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    selectedColor.value = targets.value.get(value);
+  }
+);
+
+watch(selectedColor, (value) => {
+  if (!value) {
+    return;
+  }
+  emit("update:modelValue", value.value);
+});
+
+
+onMounted(() => {
+  forFind.value = [];
+  targets.value = new Map();
+  for (const [value, title] of props.colors.entries()) {
     const obj: SelectedColor = {
       value,
       title,
     };
-      forFind.push(obj);
+    forFind.value.push(obj);
-      targets.set(value, obj);
+    targets.value.set(value, obj);
   }
-    let selectedColor = forFind[0];
+  selectedColor.value = forFind.value[0];
-
-    return {
-      selectedColor,
-      searchMode: false,
-      forFind,
-      targets,
-    };
-  },
-  watch: {
-    modelValue(val: number) {
-      const target = unwrap(this.targets.get(val));
-      this.selectedColor = target;
-    },
-    selectedColor(val: SelectedColor) {
-      this.$emit("update:modelValue", val.value);
-    },
-  },
 });
+
 </script>