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 }}
-        <span v-if="props.option.info">({{ props.option.info }})</span>
-        {{ props.option.notAvailable ? "(불가)" : undefined }}</span
+        {{ prop.option.title }}
+        <span v-if="prop.option.info">({{ prop.option.info }})</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,55 +51,63 @@ type SelectedCity = {
   notAvailable?: boolean;
 };
 
-export default defineComponent({
-  props: {
-    modelValue: {
-      type: Number,
-      required: true,
-    },
-    cities: {
-      type: Map as PropType<Map<number, { name: string; info?: string }>>,
-      required: true,
-    },
-    searchable: {
-      type: Boolean,
-      required: false,
-      default: true,
-    },
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true,
   },
-  emits: ["update:modelValue"],
-  data() {
-    const citiesForFind = [];
-    const targets = new Map<number, SelectedCity>();
-    let selectedCity;
-    for (const [value, { name, info }] of this.cities.entries()) {
-      const obj: SelectedCity = {
-        value,
-        title: name,
-        info: info,
-        simpleName: name,
-        searchText: convertSearch초성(name).join("|"),
-      };
-      if (value == this.modelValue) {
-        selectedCity = obj;
-      }
-      citiesForFind.push(obj);
-      targets.set(value, obj);
-    }
-    return {
-      selectedCity,
-      citiesForFind,
-      targets,
-    };
+  cities: {
+    type: Map as PropType<Map<number, { name: string; info?: string }>>,
+    required: true,
   },
-  watch: {
-    modelValue(val: number) {
-      const target = this.targets.get(val);
-      this.selectedCity = target;
-    },
-    selectedCity(val: SelectedCity) {
-      this.$emit("update:modelValue", val.value);
-    },
+  searchable: {
+    type: Boolean,
+    required: false,
+    default: true,
   },
 });
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: number): void;
+}>();
+
+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,
+      info: info,
+      simpleName: name,
+      searchText: convertSearch초성(name).join("|"),
+    };
+    if (value == props.modelValue) {
+      selectedCity.value = obj;
+    }
+    citiesForFind.value.push(obj);
+    targets.set(value, obj);
+  }
+});
+
+watch(
+  () => props.modelValue,
+  (value) => {
+    if (targets.has(value)) {
+      selectedCity.value = targets.get(value);
+    }
+  }
+);
+
+watch(selectedCity, (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,61 +47,67 @@
             borderRadius: '0.25rem',
           }"
         >
-          {{ props.option.title }}
+          {{ prop.option.title }}
         </div>
       </div>
     </template>
-  </v-multiselect>
+  </Multiselect>
 </template>
-<script lang="ts">
-import { unwrap } from "@/util/unwrap";
-import { defineComponent, type PropType } from "vue";
+<script setup lang="ts">
+import { Multiselect } from "vue-multiselect";
+import { onMounted, ref, watch, type PropType } from "vue";
 
 type SelectedColor = {
   value: number;
   title: string;
 };
 
-export default defineComponent({
-  props: {
-    modelValue: {
-      type: Number,
-      required: true,
-    },
-    colors: {
-      type: Array as PropType<string[]>,
-      required: true,
-    },
+const props = defineProps({
+  modelValue: {
+    type: Number,
+    required: true,
   },
-  emits: ["update:modelValue"],
-  data() {
-    const forFind = [];
-    const targets = new Map<number, SelectedColor>();
-    for (const [value, title] of this.colors.entries()) {
-      const obj: SelectedColor = {
-        value,
-        title,
-      };
-      forFind.push(obj);
-      targets.set(value, obj);
-    }
-    let selectedColor = forFind[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);
-    },
+  colors: {
+    type: Array as PropType<string[]>,
+    required: true,
   },
 });
+
+const emit = defineEmits<{
+  (event: "update:modelValue", value: number): void;
+}>();
+
+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.value.push(obj);
+    targets.value.set(value, obj);
+  }
+  selectedColor.value = forFind.value[0];
+});
+
 </script>